import React from "react";
import { Form, Input, Button, Checkbox, message, Card } from "antd";
import "./login.css";
import { setToken } from "../utils/auth";

function Login(props) {
  const { getFieldDecorator } = props.form;
  const handleSubmit = (e) => {
    console.log(e);
    e.preventDefault();
    // 验证
    props.form.validateFields((err, val) => {
      if (!err) {
        console.log(val.username);
        setToken(val)
        props.history.push("/admin")
        // 调用后台api接口
      } else {
        message.error("请输入正确的信息");
      }
    });
  };
  return (
    <Card title="Senlay Admin SYS" className="login-form">
      <Form onSubmit={(e) => handleSubmit(e)}>
        <Form.Item label="用户名">
          {getFieldDecorator("username", {
            rules: [
              {
                required: true,
                message: "请输入用户名",
              },
            ],
          })(<Input placeholder="请输入用户名" />)}
        </Form.Item>

        <Form.Item label="密码">
          {getFieldDecorator("password", {
            rules: [
              {
                required: true,
                message: "请输入密码",
              },
            ],
          })(<Input placeholder="请输入密码" />)}
        </Form.Item>

        <Form.Item name="remember" valuePropName="checked">
          <Checkbox>记住我</Checkbox>
        </Form.Item>

        <Form.Item>
          <Button type="primary" htmlType="submit">
            登录
          </Button>
        </Form.Item>
      </Form>
    </Card>
  );
}

export default Form.create({ name: "loginForm" })(Login);
